<template>
  <el-dialog :close-on-click-modal="false"
             title="配置合作单位"
             :visible.sync="formVisible"
             @close="handleClose">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :model="form" :inline="true"
                 label-position="right" size="small"
                 label-width="120px">
          <el-form-item label="合作单位:">
            <el-select v-model="form.partnerList"
                       style="width:400px;" placeholder="请输入关键词"
                       remote :remote-method="findOptions"
                       :loading="optionsLoading"
                       filterable clearable multiple>
              <el-option v-for="item in options.partner"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAddPartner">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="form.partnerListRaw" style="width: 100%;"
                 border>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="{row}">
            <el-button type="danger" size="mini"
                       @click="handleDeleteSingle(row)" class="table-inner-button">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-dialog>
</template>

<script>
import purchaseContractApi from '@/api/platformLixinping/purchaseContract'
import partnerApi from '@/api/platformLixinping/partner'

export default {
  name: 'PartnerSetting',
  data() {
    return {
      optionsLoading: false,
      options: {
        partner: []
      },
      form: {
        id: null,
        partnerList: [],
        partnerListRaw: []
      },
      formUpdated: false,
      formVisible: false
    }
  },
  methods: {
    /**
     * 显示表单
     */
    handleShow(id) {
      this.form.id = id
      this.form.partnerList = []
      this.fetchList()
        .then(() => {
          this.formVisible = true
        })
    },
    findOptions(matchValue) {
      // 输入长度小于2，则不加载
      if (!matchValue || matchValue.length < 2) {
        return
      }
      this.optionsLoading = true
      partnerApi.findOptions({ q: `name_like=${matchValue}`, sortBy: 'id', sortOrder: 'desc'})
        .then(res => {
          this.options.partner = res.data.map(item => ({
            label: item.name,
            value: item.id
          }))
        })
        .finally(() => {
          this.optionsLoading = false
        })
    },
    /**
     * 查询表格数据
     */
    fetchList() {
      return purchaseContractApi.fetchPartnerList(this.form.id)
        .then(res => {
          this.form.partnerListRaw = res.data
        })
    },
    /**
     * 执行添加操作
     */
    handleAddPartner() {
      if (!this.form.partnerList.length) {
        return
      }
      purchaseContractApi.addPartner(this.form.id, this.form.partnerList)
        .then(data => {
          this.$common.showMsg('success', '添加成功')
          this.formUpdated = true
          this.form.partnerList = []
          this.fetchList()
        })
    },
    /**
     * 移除单个
     */
    handleDeleteSingle(row) {
      return this.$common.confirm('是否确认移除')
        .then(() => purchaseContractApi.removePartner(this.form.id, [row.id]))
        .then(() => {
          this.$common.showMsg('success', '移除成功')
          this.formUpdated = true
          this.fetchList()
        })
    },
    /**
     * 表单关闭时触发
     */
    handleClose() {
      if (this.formUpdated) {
        this.$emit('updated')
      }
    }
  }
}
</script>

